<%@page pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>

<!DOCTYPE html>
<html>
<head>
<title>乱戦漢字戦略</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" type="text/css" href="/static/css/global.css" />
<script type="text/javascript">
	setTimeout(function() {
		window.scrollTo(0, 1);
	}, 500);
</script>
<style type="text/css">
#page {
	width: 290px;
	height: 430px;
	position: relative;
	margin-top: auto;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	background-color: #000000;
	margin-bottom: auto;
	margin-left: auto;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#content_area {
	color: #FFFFFF;
	margin-top: auto;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
<body>
	<div id="page">

		<div id="header">
			<c:if test="${firstLogin == '1'}">
				<b>ユーザ登録</b>
			</c:if>
			<c:if test="${firstLogin != '1'}">
				<b>ログイン</b>
			</c:if>
		</div>
		<!-- /header -->
		<div id="content_area">
			<form id="login" name="login" action="${f:url('login')}"
				method="post">
				<table style="width: 280px">
						<tr>
					<c:if test="${firstLogin == '1'}">
							<td colspan="2" align="center">
							<br />さぁ！まずは、<br />
								あなたの<span style="color: #ff0000">ユーザＩＤ</span>と<span style="color: #ffff00">パスワード</span>を<br />決めて下さい<br /> <br />
								なお、既に登録されている<br /> <span style="color: #ff0000">ユーザＩＤ</span>は使用できません<br /> <br />
							</td>
					</c:if>
					<c:if test="${firstLogin != '1'}">
							<br />
							<td colspan="2" align="center">
								あなたの<span style="color: #ff0000">ユーザＩＤ</span>と<span style="color: #ffff00">パスワード</span>を<br />
								入力して下さい<br />
						<br />
						<br />
							</td>
					</c:if>
					</tr>
				</table>
				<table align="center">
					<tr>
						<td style="color: #FF0000">ユーザＩＤ：</td>
					</tr>
					<tr>
						<td><input style="width: 200px; height: 25px; font-size: 24px;" type="text" ${f:text("userId")} size="10"
							maxlength="10" class="${f:errorClass('userId', 'err')}" /></td>
					</tr>
					<tr>
						<td style="color: #FFFF00">Ｐａｓｓ：</td>
					</tr>
					<tr>
						<td><input style="width: 200px; height: 25px; font-size: 24px;" type="password" ${f:text("passWord")} size="10"
							maxlength="10" class="${f:errorClass('passWord', 'err')}" /></td>
					</tr>
					<tr>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<c:if test="${firstLogin == '1'}">
								<button style="width: 200px; height: 50px; font-size: 30px;"
									type="submit" id="btnLogin">登録</button>
							</c:if>
							<c:if test="${firstLogin != '1'}">
								<button style="width: 200px; height: 50px; font-size: 30px;"
									type="submit" id="btnLogin">ログイン</button>
							</c:if>
						</td>
					</tr>
				</table>
				<table align="center">
					<tr>
						<td><jsp:include page="/messageArea.jsp" /></td>
					</tr>
				</table>
				<input type="hidden" ${f:hidden("firstLogin")} />
			</form>
		</div>
		<!-- /content -->

	</div>
	<!-- /page -->

</body>
</html>